<template>
    <div class="card person-statistics" style="min-height: calc(100vh - 135px); overflow: auto">
        <div class="card-cont">
            <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane v-for="(item, index) of statisticsList" :key="index" style="overflow-x: hidden">
                    <template #tab>
                        <a-badge :count="index === 0 ? item.count : 0" :offset="[10, 0]">
                            <span>{{ item.name }}</span>
                        </a-badge>
                    </template>
                    <div v-empty="!item.isEmpty" v-loading="loading" style="min-height: 200px; position: relative">
                        <div v-for="(elem, index) of item.list" :key="index" class="list-item" @click="showDetail(elem)">
                            <a-tag color="blue" v-if="elem.stage">{{ elem.stage }}</a-tag>
                            <span class="margin-l-8 disable-font-color" v-if="elem.systemTag">{{ elem.systemTag.join(',') }}</span>
                            <flexbox class="margin-t-8">
                                <flexbox-item v-fitText>
                                    <span>
                                        <a-tag style="color: #26a971; background: rgba(138, 255, 193, 0.1); border-color: #92e1bf">{{
                                            elem.type
                                        }}</a-tag>
                                        {{ elem.name }}
                                    </span>
                                </flexbox-item>
                            </flexbox>
                        </div>
                    </div>
                </a-tab-pane>
                <template #tabBarExtraContent>
                    <flexbox @click="showMore">
                        <a class="caption-font-color">更多<RightOutlined class="margin-l-8 caption-font-color" /></a>
                    </flexbox>
                </template>
            </a-tabs>
        </div>
        <!-- <img src="@/assets/images/workbench/img_business.png" class="img1" />
        <img src="@/assets/images/workbench/img_1.png" class="img2" /> -->
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { RightOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { defineComponent, reactive, toRefs } from 'vue';
import Flexbox from '@/components/Flexbox/Flexbox.vue';
interface CardState {
    loading: boolean;
    statisticsCount: any[];
    statisticsList: any[];
    activeKey: number;
}
export default defineComponent({
    name: 'PersonStatistics',
    components: {
        RightOutlined,
        Flexbox
    },
    setup() {
        const router = useRouter();
        const state = reactive<CardState>({
            loading: false,
            statisticsCount: [
                { name: '需求受理', key: 'businessCount', count: 0 },
                { name: '功能点', key: 'productCount', count: 0 },
                { name: '版本迭代', key: 'versionCount', count: 0 }
            ],
            statisticsList: [{ name: '待处理' }, { name: '已处理' }],
            activeKey: 0
        });
        const getCount = async () => {
            const { success, moule } = await api.workbenchModel.countRequires();
            if (success) {
                state.statisticsCount.forEach((item, index) => {
                    state.statisticsCount[index].count = moule[item.key];
                });
            }
        };
        const getList = async () => {
            state.loading = true;
            Promise.all([api.workbenchModel.findPendingRequire(), api.workbenchModel.findProcessedRequire()]).then((res) => {
                state.loading = false;
                state.statisticsList = res.map((item, index) => ({
                    ...state.statisticsList[index],
                    list: [...item.moule],
                    count: item.moule.length,
                    isEmpty: !item.moule.length
                }));
            });
        };
        const showDetail = ({ id, type, devType }) => {
            let path = '';
            let query: any = {
                id
            };
            switch (type) {
                case '受理':
                    path = '/taskRequire/taskDetail';
                    break;
                case '研发':
                    path = '/version/versionDetail';
                    break;
                case '变更':
                    path = '/requireChange/changeDetail';
                    break;
                case '能效汇报':
                    path = '/energyManage/analysisReport/detail';
                    break;
                case '版本能效':
                    path = '/energyManage/versionReportHistory/detail';
                    query = {
                        ...query,
                        devType
                    };
                    break;
                case '路标规划':
                    path = '/lubiao/my/detail';
                    break;
                case '路标管理':
                    path = '/registeredProject/detail';
                    break;
                default:
                    '';
            }
            router.push({
                path,
                query
            });
        };
        const showMore = () => {
            router.push({
                path: '/workbench/todoList',
                query: {
                    type: state.activeKey
                }
            });
        };

        getCount();
        getList();
        return {
            ...toRefs(state),
            showDetail,
            showMore
        };
    }
});
</script>

<style scoped lang="less">
@import '../style';
.img1 {
    position: absolute;
    top: 6px;
    left: 24px;
}
.img2 {
    position: absolute;
    top: 0;
    right: 0;
}
::v-deep(.ant-tabs-tabpane) {
    //274
    height: calc(100vh - 109px) !important;
    overflow-y: auto;
}
</style>
